<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Vue实现原理</title>
	</head>
	<body style="background:#f2f2f2;">
		<div id="app">
			<h1>
				Vue实现原理 <small id="name">{{ msg }}</small>
			</h1>
			<ol>
				<li><p>Object.defineProperty 实现数据劫持</p></li>
				<li><p>发布者-订阅者模式 实现双向数据绑定</p></li>
				<li><p>object.call 触发更新回调</p></li>
				<li><p>Object.defineProperty 代理data,直接挂载到实例上</p></li>
				<li>
					<p>模板解析 扫描模板并替换相应内容及添加订阅者</p>
				</li>
				<li><p>model解析 扫描节点属性并注册相关事件及订阅者</p></li>
				<li><p>事件解析 扫描节点属性并绑定对应事件</p></li>
				<li><p>待办：自定义标签的实现</p></li>
				<li><p>待办：单文件组件的实现</p></li>
				<li><p>hashchange 实现前端路由</p></li>
			</ol>
			<button id="btn-count">原生事件</button>
			<button v-on:click="addCount">指令事件</button>
			<button>
				总数：<span>{{ count }}</span>
			</button>
			<button v-on:dblclick="randomMsg">双击设置随机数据</button> <input type="text" v-model="msg" />
			<br />
			<button><a href="#main">main</a></button>
			<button><a href="#user">user</a></button>
			<div id="router-view" style="padding:20px;margin:30px 0;background:#fff;"></div>
		</div>
	</body>
</html>
